<template>
	<div class="system-home-panel">
		<div class="system-info-wrap">
			<awsui-form ref="form" :model="SystemInfo" label-position="top" label-width="80px" size="mini"
				:rules="rules" :disabled="isReadOnlyAppAuth">
				<div class="system-info">
					<div class="info-title">{{ $t("基本信息") }}</div>
					<el-divider class="default-divider"></el-divider>
					<div class="info-form">

						<el-row :gutter="15">
							<el-col :span="12">
								<awsui-form-item :label="$t('名称')" prop="name" required>
									<awsui-input v-model="SystemInfo.name" :placeholder="$t('请输入名称')" maxlength="50">
										<!--<template #suffix>
											<i class="awsui-iconfont">&#xe7be;</i>
										</template>-->
									</awsui-input>
								</awsui-form-item>
							</el-col>
							<el-col :span="12">
								<div class="userphoto"
									:style="isReadOnlyAppAuth ? 'pointer-events: none;opacity:0.9;' : ''">
									<awsui-icon-picker v-model="iconColors" :defaultOptions="defaultIconPickerOptions"
										@change="handleIconFont" @status="getIconPickerStatus"
										v-if="updateIconPicker"></awsui-icon-picker>
									<div style="color: #D6D6D6" v-show="!isReadOnlyAppAuth">{{ $t("点击设置图标") }}</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('URL地址')" prop="linkUrl" required>
									<awsui-formula v-model="SystemInfo.linkUrl" :option="atFormulaOptionForUrl"
										:readonly="isReadOnlyAppAuth" :disable="isReadOnlyAppAuth"
										@input="onCmCodeChangeForUrl"
										:placeholder="$t('请输入Url地址，空地址可填 / ')"></awsui-formula>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15" v-if="SystemInfo.linkUrl != '/' && SystemInfo.linkUrl != ''">
							<el-col :span="24">
								<awsui-form-item :label="$t('打开目标')" clearable="true" style="width:100%;">
									<awsui-select v-model="SystemInfo.target" :options="targetOption"
										:placeholder="$t('请选择打开目标')"></awsui-select>
								</awsui-form-item>
							</el-col>
						</el-row>

						<el-row :gutter="15" v-if="(currentNodeId == '' && SystemInfo.id == '') && currentAppId == ''">
							<el-col :span="24">
								<awsui-form-item :label="$t('所属应用')" prop="appId" required>
									<aws-app-select width="100%" :sid="appInfo.sid" filter="develop"
										:placeholder="$t('选择归属应用')" :value="SystemInfo.appId"
										:disabled="currentAppId != ''" v-on:getResult="getSelectAppValue">
									</aws-app-select>
								</awsui-form-item>
							</el-col>
						</el-row>

						<awsui-form-item :label="$t('描述')">
							<awsui-input v-model="SystemInfo.desc" type="textarea"
								:placeholder="$t('请输入描述')"></awsui-input>
						</awsui-form-item>

					</div>
				</div>

				<div class="config-advanced-show-op" v-if="currentNodeId != ''">
					<el-link @click="changeAdvancedFlag" v-html="showAdvancedConfig ? $t('隐藏高级设置') : $t('显示高级设置')"
						type="primary" underline="false" href="javascript:void(0);"
						style="font-size:13px;font-weight:normal;"></el-link>
					<!--<i class="awsui-iconfont" @click="changeAdvancedFlag" v-html="showAdvancedConfig?'&#xe718;':'&#xe716;'"> </i>-->
				</div>

				<!-- <div class="system-info" v-if="currentNodeId!=''" v-show="showAdvancedConfig"> -->
				<div class="system-info" v-show="showAdvancedConfig">
					<div class="info-title">{{ $t("高级设置") }}</div>
					<el-divider class="default-divider"></el-divider>
					<div class="info-form">
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('显示顺序')" prop="orderIndex" required>
									<awsui-input v-model.number="SystemInfo.orderIndex"
										:placeholder="$t('请输入显示顺序')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15"
							v-show="SystemInfo.showPortalNotifier && (SystemInfo.linkUrl != '/' && SystemInfo.linkUrl != '')">
							<el-col :span="24">
								<awsui-form-item :label="$t('Metro栅格')">
									<awsui-input v-model="SystemInfo.notifier"
										:placeholder="$t('通过特定接口的Class类，自定义盯到Metro桌面的栅格内容样式')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展1')">
									<awsui-input v-model="SystemInfo.ext1" :placeholder="$t('请输入自定义扩展1')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展2')">
									<awsui-input v-model="SystemInfo.ext2" :placeholder="$t('请输入自定义扩展2')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展3')">
									<awsui-input v-model="SystemInfo.ext3" :placeholder="$t('请输入自定义扩展3')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展4')">
									<awsui-input v-model="SystemInfo.ext4" :placeholder="$t('请输入自定义扩展4')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展5')">
									<awsui-input v-model="SystemInfo.ext5" :placeholder="$t('请输入自定义扩展5')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
					</div>
				</div>

				<div class="system-info" v-if="currentNodeId != ''" v-show="showAdvancedConfig">
					<div class="info-form" style="position:relative;">
						<div class="app-info-toolbar" v-show="currentAppId == ''">
							<el-link @click="changeNavAppId" type="primary" underline="false" href="javascript:void(0);"
								style="font-size:13px;font-weight:normal;"
								:disabled="isReadOnlyAppAuth">{{ $t("设置/更改归属应用") }}</el-link>
							&nbsp;&nbsp;
							<el-link @click="applyNavAppId" type="primary" underline="false" href="javascript:void(0);"
								style="font-size:13px;font-weight:normal;" v-if="appInfo.appId != '' && hasChildren"
								:disabled="isReadOnlyAppAuth" v-loading.fullscreen.lock="applyAppidFsLoading"
								:elementLoadingText="$t('正在更新，请稍候...')">{{ $t("批量更新下级归属应用") }}
							</el-link>
						</div>
						<aws-app-info ref="appinfo" :sid="appInfo.sid" :appId="appInfo.appId" :id="appInfo.id"
							:modelType="appInfo.modelType" :hideManage="appInfo.hideManage"
							:permTypeScope="appInfo.permTypeScope" :emptyText="appInfo.emptyText"></aws-app-info>
					</div>
				</div>
			</awsui-form>
		</div>


		<awsui-dialog :title="$t('选择归属应用')" v-model="appDialogVisible" width="60%">
			<div class="nav-owner-app-dlg-content" style="overflow:hidden;">
				<aws-app-select width="100%" :sid="appInfo.sid" filter="develop" :placeholder="$t('选择归属应用')"
					:value="SystemInfo.appId" v-on:getResult="getSelectAppValue">
				</aws-app-select>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<awsui-button @click="appDialogVisible = false">关 闭</awsui-button>
				</span>
			</template>
		</awsui-dialog>
		<!--<NPS :npsCode="npsData" v-show="></NPS>-->
	</div>
</template>

<script>
export default {
	name: "SystemInfo",
	components: {},
	props: ['currentNodeId', 'currentNodeName', 'currentNodeReadonly', 'currentAppId', 'isYijingCloud'],
	data() {
		return {
			rules: {
				name: [
					{ required: true, message: "必填" },
				],
				linkUrl: [
					{ required: true, message: "必填" },
				],
				orderIndex: [
					{ required: true, message: '必填' },
					{ type: 'number', message: '必须为数字值' },
					{ pattern: /(^[1-9]\d*$)/, message: '请输入正整数', trigger: 'change' }
				],
			},
			labelPosition: 'left',
			isReadOnlyAppAuth: this.currentNodeReadonly,
			targetOption: [{
				value: 'mainFrame',
				label: this.$t("主工作区")
			}, {
				value: '_blank',
				label: this.$t("新窗口")
			}, {
				value: 'sidebar',
				label: this.$t("侧边栏")
			}],
			SystemInfo: {
				id: "",
				name: '',
				linkUrl: "/",
				target: "mainFrame",
				desc: '',
				appId: "",
				isIconFont: true,
				iconFontColor: "#ff9421",
				iconFontCode: "&#xe719;",
				icon16: "",
				icon64: "",
				icon96: "",
				orderIndex: "0",
				notifier: "",
				isActivity: "1",//1 启用   0 关闭
				ext1: '',
				ext2: '',
				ext3: '',
				ext4: '',
				ext5: '',
				icon16IconFont: "",
				showPortalNotifier: false,
			}, appInfo: {
				sid: settingParam.sessionId,
				appId: "",
				modelType: 'nav',
				id: "",
				hideManage: true,
				permTypeScope: "AB",
				emptyText: '',
			},
			appDialogVisible: false,
			showAdvancedConfig: false,
			defaultIconPickerOptions: {
				type: "background", //必传，type为"background"时，改变背景颜色，图标颜色固定，type为"icon"时改变图标颜色，背景颜色固定
				//icon: "&#xe614;",  //图标
				//color: "#f2f2f2", //颜色
				format: false, //icon是否是图片格式
				close: false,
			},
			iconColors: {
				icon: "",
				color: ""
			},
			updateIconPicker: true,
			hasChildren: false,
			atFormulaOptionForUrl: {
				contextData: {
					data: [],
					appId: ""
				}
			},
			applyAppidFsLoading: false,
			currentAppId: this.currentAppId,
			npsData: "NPS20502",
		}
	},
	created() {
	},
	mounted() {
		let id = this.currentNodeId;
		if (id != "") {
			//报错！id.startsWith
			// if (id.startsWith("s_")) {
			// 	this.SystemInfo.id = id.substr(2);
			// 	this.appInfo.id = id;
			// }
			this.getSystemInfo();
		} else {
			this.SystemInfo.appId = this.currentAppId;
			this.isReadOnlyAppAuth = this.currentNodeReadonly;

			this.rules["appId"] = [
				{ required: true, message: "必填" },
			];

		}

	},
	methods: {
		onCmCodeChangeForUrl(newCode) {
			if (typeof newCode == "string") {
				this.SystemInfo.linkUrl = newCode;
			}
		},
		handleIconFont(iconFont) {
			this.SystemInfo.icon16IconFont = iconFont.icon + "|" + iconFont.color;
			/*
			this.defaultIconPickerOptions.icon = iconFont.icon;
			this.defaultIconPickerOptions.color = iconFont.color;
			this.defaultIconPickerOptions.format = false;
			this.defaultIconPickerOptions.close = false;
			*/
		},
		getIconPickerStatus(val) {
			console.log("getStatus:" + val);
		},
		validForm(callback) {
			/*let flag = true;
			this.$refs.form.validateField("name", (msg, info) => {
				if (info != null) {
					flag = false;
				}
			});
			this.$refs.form.validateField("linkUrl", (msg, info) => {
				if (info != null) {
					flag = false;
				}
			});
			if (this.SystemInfo.id == '') {
				//新建时必填校验
				this.$refs.form.validateField("appId", (msg, info) => {
					if (info != null) {
						flag = false;
					}
				});
			}

			this.$refs.form.validateField("orderIndex", (msg, info) => {
				if (info != null) {
					flag = false;
				}
			});*/
			this.$refs["form"].validate((valid) => {
				if (valid) {
					callback();
				}
			});
		},
		getSelectAppValue(data) {
			console.log(data);
			this.SystemInfo.appId = data;
			this.appInfo.appId = data;
			this.changeAppIconInfoByAppId(data);

		},
		changeAppIconInfoByAppId(appId) {
			let $this = this;
			let that = this;
			let data = {
				url: 'jd',
				data: {
					cmd: 'CONSOLE_P_NAV_GET_APP_INFO',
					sid: settingParam.sessionId,
					appId: appId
				}
			};
			// 查询数据
			that.awsuiaxios.post(data).then(function (ro) {
				if (ro.result == "ok") {
					let info = ro.data.appInfo;
					if (JSON.stringify(info) === '{}') {
						that.appInfo.appId = "";
						that.appInfo.emptyText = that.$t("未设置所属应用");
						return false;
					}

					//图标
					if (info.iconFont.color != "" || info.iconFont.code != "") {
						that.SystemInfo.icon16IconFont = info.iconFont.code + "|" + info.iconFont.color;
						let iconValueOb = { "icon": info.iconFont.code, "color": info.iconFont.color };
						//that.defaultIconPickerOptions.icon = iconValueOb.icon;
						//that.defaultIconPickerOptions.color = iconValueOb.color;
						that.iconColors.icon = iconValueOb.icon;
						that.iconColors.color = iconValueOb.color;

						that.defaultIconPickerOptions.show = false;
						that.defaultIconPickerOptions.format = false;
						that.defaultIconPickerOptions.close = false;
						that.reloadIconPicker();
					} else if (info.icon16 != "") {
						if (info.icon96 != "") {
							//that.defaultIconPickerOptions.color = "#f2f2f2";
							//that.defaultIconPickerOptions.icon = info.icon96;
							that.iconColors.color = "#f2f2f2";
							that.iconColors.icon = info.icon96;
							that.defaultIconPickerOptions.format = true;
							that.reloadIconPicker();
						}
						that.SystemInfo.icon16 = info.icon16;
						that.SystemInfo.icon64 = info.icon64;
						that.SystemInfo.icon96 = info.icon96;
					} else {
						that.SystemInfo.icon16 = '';
					}
				}
			}).catch(error => {
				console.log(error);
			});
		},
		chargeBlur() {
		},
		getSystemInfo() {
			let $this = this;
			let that = this;
			let data = {
				url: 'jd',
				data: {
					cmd: 'CONSOLE_P_NAV_DESIGN_DETAIL_INFO',
					sid: settingParam.sessionId,
					type: "system",
					id: that.SystemInfo.id
				}
			};
			// 查询数据
			that.awsuiaxios.post(data).then(function (ro) {
				if (ro.result == "ok") {
					let info = ro.data.info;
					//that.isReadOnlyAppAuth = info.readonly;
					that.SystemInfo.name = info.systemName;
					that.SystemInfo.desc = info.navDesc;
					that.SystemInfo.target = info.workTarget;
					that.SystemInfo.linkUrl = info.linkUrl;
					that.SystemInfo.orderIndex = info.orderIndex;
					that.SystemInfo.appId = info.appid;
					that.appInfo.appId = info.appid;
					that.SystemInfo.isActivity = info.isActivity ? "1" : "0";
					that.SystemInfo.notifier = info.notifier;
					that.SystemInfo.ext1 = info.ext1;
					that.SystemInfo.ext2 = info.ext2;
					that.SystemInfo.ext3 = info.ext3;
					that.SystemInfo.ext4 = info.ext4;
					that.SystemInfo.ext5 = info.ext5;
					that.SystemInfo.icon16 = info.icon16;
					that.SystemInfo.icon64 = info.icon64;
					that.SystemInfo.icon96 = info.icon96;
					that.SystemInfo.showPortalNotifier = info.showPortalNotifier;
					that.hasChildren = info.hasChildren;
					//图标
					if (info.isIconfont) {
						that.SystemInfo.icon16IconFont = info.iconFontCode + "|" + info.iconFontColor;
						let iconValueOb = { "icon": info.iconFontCode, "color": info.iconFontColor };
						//that.defaultIconPickerOptions.icon = iconValueOb.icon;
						//that.defaultIconPickerOptions.color = iconValueOb.color;
						that.iconColors.icon = iconValueOb.icon;
						that.iconColors.color = iconValueOb.color;

						that.defaultIconPickerOptions.show = false;
						that.defaultIconPickerOptions.format = false;
						that.defaultIconPickerOptions.close = false;
						that.reloadIconPicker();
					} else {
						if (info.icon96 != "") {
							that.iconColors.icon = info.icon96Img;

							that.defaultIconPickerOptions.format = true;
							that.reloadIconPicker();
						} else {
							that.iconColors.icon = info.iconFontCode;
							that.iconColors.color = info.iconFontColor;
							that.reloadIconPicker();
						}
						that.SystemInfo.icon16IconFont = info.icon16;
					}
					if (info.appid == "") {
						that.appInfo.emptyText = that.$t("未设置所属应用");
						that.showAdvancedConfig = true;
						that.$nextTick(() => {
							document.getElementsByClassName("app-info-toolbar")[0].scrollIntoView({ block: "center", behavior: "smooth" });
						});
					} else {
						//所属应用是否有效
						if (info.isInValidAppId) {
							that.appInfo.appId = "";
							that.appInfo.emptyText = that.$t("所属应用无效,请重新设置");
							that.$message({ type: "warning", message: that.$t("所属应用无效") });
						}
					}
				}

			}).catch(error => {
				console.log(error);
			});
		},
		reloadIconPicker() {
			// 移除组件
			this.updateIconPicker = false;
			// 在组件移除后，重新渲染组件
			// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
			this.$nextTick(() => {
				this.updateIconPicker = true
			})
		},
		changeNavAppId() {
			this.appDialogVisible = true;
		},
		applyNavAppId() {
			let $this = this;
			let that = this;
			let type = "system";
			let data = {
				url: 'jd',
				data: {
					cmd: 'CONSOLE_P_NAV_CHECK_APPLY_TO_SUB',
					sid: settingParam.sessionId,
					type: type,
					id: that.SystemInfo.id,
					appId: that.appInfo.appId
				}
			};
			// 查询数据
			that.awsuiaxios.post(data).then(function (ro) {
				if (ro['result'] == 'ok') {
					//有不一致的appid
					if (!ro.data.sameFlag) {
						var warningInfo = that.$t("该子系统下存在非当前所属应用的目录和功能菜单，是否继续？");
						that.$confirm(warningInfo, that.$t("提示"), {
							confirmButtonText: that.$t("确定"),
							cancelButtonText: that.$t("取消"),
							type: 'warning'
						}).then(() => {
							that.applyToSub();
						}).catch(() => {
							//this.$message({message: '已取消'});
						});
					} else {
						that.applyToSub();
					}
				} else {
					that.$message({ type: ro['msg'], message: ro['result'] });
				}
			}).catch(error => {
				console.log(error);
			});
		},
		applyToSub() {
			let $this = this;
			let that = this;
			let type = "system";
			that.applyAppidFsLoading = true;
			let data = {
				url: 'jd',
				data: {
					cmd: 'CONSOLE_P_NAV_APPID_APPLY_TO_SUB',
					sid: settingParam.sessionId,
					type: type,
					id: that.SystemInfo.id,
					appId: that.appInfo.appId
				}
			};
			// 查询数据
			that.awsuiaxios.post(data).then(function (ro) {
				if (ro['result'] == 'ok') {
					that.$message({ type: "success", message: that.$t("应用成功") });
				} else {
					that.$message({ type: ro['result'], message: ro['msg'] });
				}
				that.applyAppidFsLoading = false;
			}).catch(error => {
				console.log(error);
			});
		},
		changeAdvancedFlag() {
			this.showAdvancedConfig = !this.showAdvancedConfig;
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.system-info-wrap {
	overflow-y: auto;
	padding: 0 30px !important;
	height: calc(100vh - 54px - 48px);
}

.info-title {
	font-size: 13px !important;
	color: #333 !important;
	font-weight: 700 !important;
	margin-top: 10px;
	display: inline-block !important;
}

.config-advanced-show-op {
	float: right;
	margin-top: 10px;
}

.default-divider {
	margin: 6px 0 !important;
}

.userphoto {
	height: 100px;
	width: 125px;
	/*float: left;*/
	text-align: -webkit-center;
	padding-top: 1%;
	margin: 0 auto;
}
</style>

<style>
.app-info-toolbar {
	width: 300px;
	position: absolute;
	right: 0px;
	top: 17px;
	text-align: right;
}

/*  应用信息 需要更改的样式*/
.el-header {
	padding: 15px 0px !important;
}

.app-info {
	padding: 0px 0px !important;
}

.cc-dev-main {
	padding: 5px 0px !important;
}

.cc-dev-main-card {
	margin: 10px 0 !important;
}

/*  应用信息 需要更改的样式*/
</style>
